<template>
  <div>
    <div>
      <section class="layout-index pc-model mt-5">
        <div class="banner-index mb-6">
          <div class="container">
            <div class="index-banner el-carousel el-carousel--horizontal" data-v-bffc9160>
              <el-carousel height="400px" :interval="5000" arrow="always" :autoplay="false">
                <!--轮播图-->
                <el-carousel-item v-for="item in carousel" :key="item.carousel_pid">
                  <div class="section white h-400 position-relative radius-5x d-flex align-items-center"
                  >
                    <!--动态效果-->
                    <div class="bg-shape-holder">
                      <img
                        src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/shape-1.svg" class="shape-three"
                      >
                      <img src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/shape-55.svg"
                           class="shape-four">
                      <img
                        src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/shape-56.svg" class="shape-five"
                      >
                      <img src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/shape-57.svg"
                           class="shape-six">
                      <img src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/shape-58.svg"
                           class="shape-seven"
                      >
                      <img src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/shape-59.svg"
                           class="shape-eight"
                      >
                      <img src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/shape-60.svg"
                           class="shape-nine"
                      >
                      <img src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/shape-61.svg"
                           class="shape-ten">
                      <img src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/shape-62.svg"
                           class="shape-eleven">
                      <img src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/shape-10.svg"
                           class="shape-10">
                      <img
                        src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/shape-11.svg" class="shape-11">
                      <span class="big-round-one"></span>
                      <span class="big-round-two"></span> <span
                      class="big-round-three"></span>
                    </div>
                    <!--动态效果END-->
                    <div class="w-600 pl-10 position-relative z-index-9999">
                      <h2>{{ item.title }}</h2>
                      <p class="text-muted  fs-18"> {{ item.des }}</p>
                      <router-link :to="{ path: '/product/details', query: { productID: item.productPid } }"
                                   class="btn btn-theme btn-round px-6"
                      >即刻前往
                      </router-link>
                    </div>
                    <div class="index-banner-image-two">
                      <img style="border-radius:8px;" :src=item.imgPath>

                    </div>
                  </div>
                </el-carousel-item>
                <!--轮播图-->
              </el-carousel>
            </div>
          </div>
        </div>
        <div class="container">
          <div class="index-special row mb-6">
            <div class="col-3">
              <router-link :to="{ path: '/special/details', query: { ztPid: 4 } }">
                <div class="macwk-card bg-gradient-green hover-shadow-6 py-3 text-center">
                  <div class="macwk-card__collapsible-content vs-con-loading__container">
                    <div class="macwk-card__body">
                      <h6 class="mb-0 text-white">
                        <i class="icon-office fs-22 mr-3 v-m-3"></i>
                        <span>承德必去</span></h6>
                    </div>

                  </div>
                </div>
              </router-link>
            </div>
            <div class="col-3">
              <router-link :to="{ path: '/special/details', query: { ztPid: 6 } }">
                <div class="macwk-card bg-gradient-orange hover-shadow-6 py-3 text-center">

                  <div class="macwk-card__collapsible-content vs-con-loading__container">
                    <div class="macwk-card__body">
                      <h6 class="mb-0 text-white">
                        <i class="icon-gallery fs-22 mr-3 v-m-3"></i>
                        <span>宽城必去</span>
                      </h6>
                    </div>
                  </div>
                </div>
              </router-link>
            </div>
            <div class="col-3">
              <router-link :to="{ path: '/special/details', query: { ztPid: 8 } }">
                <div class="macwk-card bg-gradient-blue hover-shadow-6 py-3 text-center">
                  <div class="macwk-card__collapsible-content vs-con-loading__container">
                    <div class="macwk-card__body">
                      <h6 class="mb-0 text-white">
                        <i class="icon-cp fs-22 mr-3 v-m-3"></i>
                        <span>丰宁必去</span>
                      </h6>
                    </div>
                  </div>
                </div>
              </router-link>
            </div>
            <div class="col-3">
              <router-link :to="{ path: '/special' }">
                <div class="macwk-card bg-gradient-purple hover-shadow-6 py-3 text-center">
                  <div class="macwk-card__collapsible-content vs-con-loading__container">
                    <div class="macwk-card__body">
                      <h6 class="mb-0 text-white">
                        <i class="icon-code fs-22 mr-3 v-m-3"></i>
                        <span>更多专题</span>
                      </h6>
                    </div>
                  </div>
                </div>
              </router-link>
            </div>
          </div>
        </div>
        <div class="container mb-5">
          <div class="d-flex app-content-header mb-6">
            <div class="main-title">
              <h4 class="i-con-h-a mb-0">
                <i class="mr-1 text-muted i-con i-con-calendar v-m-4"><i></i></i>
                <span>景点</span>
              </h4>
            </div>
            <nav class="nav nav-title flex-grow-1">
              <div v-for="item in pdCateGory" :key="item.pid" style="width: 70px">
                <router-link :to="{}" :class="item.activityStatus == activityStatus ? 'nav-link active' : 'nav-link'">
                  <div @click="productChange(item.activityStatus)">{{ item.activityName }}</div>
                </router-link>
              </div>
            </nav>
            <div class="more-action">
              <router-link :to="{ path: '/product' }" class="btn btn-more active">
                更多景点
                <i class="icon-arrow-right fw-600 fs-12 v-2"></i>
              </router-link>
            </div>
          </div>
          <div class="soft-index lazy-transition w-r" style="margin-left:-10px;margin-right:-10px;">
            <div v-for="item in newProList" :key="item.pid">
              <!--单景点展示-->
              <div class="list-animation-leftIn w-c w-c-4 delay-11"
                   style="padding-left:10px;padding-right:10px;padding-bottom:20px;">
                <router-link :to="{ path: '/product/details', query: { productID: item.pid } }"
                             class="macwk-app border white cursor-pointer mb-0">
                  <div class="macwk-app__header--icon">
                    <div class="macwk-app__header--icon--content"
                         style="--img:url(https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/tap-forms-mac-5.png);">
                    </div>
                    <img class="delay-5" v-if="item.imgUrl"
                         style="border-radius:8px;"
                         data-src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/tap-forms-mac-5.png"
                         :src=item.imgUrl[0]
                         lazy="loaded">
                    <img class="delay-5" v-else
                         data-src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/tap-forms-mac-5.png"
                         src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/tap-forms-mac-5.png"
                         lazy="loaded">
                  </div>
                  <div class="macwk-app__body h-150">
                    <h5 class="macwk-app__body--title"
                        style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 1;">
                      <span>{{ item.productName }}</span>
                      <span
                        class="macwk-app__body--title--version text-muted fs-14">
<!--                      <span class="mx-1">-</span>{{item.updateTime}}-->
                    </span>
                    </h5>
                    <p class="macwk-app__body--version text-truncate">
                      <span
                        style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 1;">
                      {{ item.updateTime.slice(0, 10) }}
                    </span>
                    </p>
                    <p class="macwk-app__body--info"
                       style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 1;">
                      <span>{{ item.des }}</span>
                    </p>
                  </div>
                  <div class="macwk-app__footer macwk-app__footer--margin">
                    <div class="macwk-app__footer--more">
                      <i class="light-icon-more icon-next-arrow"></i>
                    </div>
                  </div>
                </router-link>
              </div>
              <!--单点展示END-->
            </div>

          </div>
        </div>
        <div class="white dk py-7">
          <div class="container">
            <div class="d-flex app-content-header mb-6">
              <div class="main-title">
                <h4 class="i-con-h-a mb-0">
                  <i class="mr-1 text-muted i-con i-con-layer v-m-4"><i></i></i>
                  <span>攻略</span>
                </h4>
              </div>
              <nav class="nav nav-title flex-grow-1">
                <div v-for="item in glCateGory" :key="item.pid" style="width: 70px">
                  <router-link :to="{}" :class="item.pid == glActivityStatus ? 'nav-link active' : 'nav-link'">
                    <div @click="glChange(item.pid)">{{ item.categoryName }}</div>
                  </router-link>
                </div>
              </nav>
              <div class="more-action">
                <router-link :to="{ path: '/gl'}" class="btn btn-more active">
                  更多攻略<i class="icon-arrow-right fw-600 fs-12 v-2"></i>
                </router-link>
              </div>
            </div>
            <div class="row gap-a">
              <div class="com-md-12 col-lg-6" v-for="item in newGlList" :key="item.pid">
                <router-link :to="{ path: '/gl/details', query: { glPid: item.pid } }"
                             class="feature-block-three border white dk hover-shadow-6 delay-0 list-animation-leftIn">
                  <div class="d-flex align-items-center">
                    <div class="icon-box icon-one">
                      <img class="delay-0" v-if="item.imgPath"
                           style="height: 120px; border-radius:8px;"
                           data-src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/home-banner-carry.png"
                           :src=item.imgPath
                           lazy="loaded">
                      <img class="delay-0" v-else
                           data-src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/home-banner-carry.png"
                           src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/home-banner-carry.png"
                           lazy="loaded">

                    </div>
                    <div class="text">
                      <h5
                        style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 2;">
                        {{ item.title }}
                      </h5>
                      <div class="text-muted fs-16 mr-3">{{ item.createTime }}</div>
                    </div>
                    <div class="read-more d-flex justify-content-end w-80 pr-3"><i
                      class="light-icon-more icon-next-arrow"></i></div>
                  </div>
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!--窗口太小啦-->
      <div class="mobile-model">
        <div class="d-flex layout-min-full-height justify-content-center align-items-center">
          <div class="text-center" style="width: 80%; margin: 0 auto">
            <h1 class="mb-4">哇，窗口太小啦</h1>
            <p class="mb-6">请调整浏览器窗口大小或者请使用手机查看！</p>
          </div>
        </div>
      </div>
      <!--窗口太小啦END-->
    </div>
  </div>
</template>
<script>
import MyList from "@/components/MyList.vue";
import MyGl from "@/components/MyGl.vue";
import MyMenu from "@/components/MyMenu.vue";

export default {
  components: {MyList, MyMenu, MyGl},
  name: "IndexPage",
  data() {
    return {
      activeName1: 'second',
      carousel: "", // 轮播图数据
      newProList: "", // 最新发布景点
      newGlList: [], // 热门攻略
      newGlListLeft: [], // 热门目的地列表
      newGlListRight: [], // 热门目的地列表
      miTvList: "", // 景点列表
      applianceList: "", // 景点列表
      applianceHotList: "", //景点列表
      accessoryList: "", //景点列表
      accessoryHotList: "", //热门景点列表
      protectingShellList: "", // 景点列表
      chargerList: "", //景点列表
      applianceActive: 1, // 当前选中的景点分类
      glCateGory: "", //攻略分类
      pdCateGory: [], //景点分类
      productCateGory: "",
      activityStatus: 0,
      glActivityStatus: 1,
      activeName: "first",
    };
  },
  mounted() {
    this._getCarousel_();
    this._getGlCateGory_();
    // this._getPdCateGory_();
    this._getProductCateGory_();
    // 获取各类景点数据
    this.getPromo(0, "newProList");
    this.getGl(1, "newGlList");
    this.pdCateGory = [{
      pid: 0,
      activityStatus: 0,
      activityName: "最新"
    }, {
      pid: 1,
      activityStatus: 1,
      activityName: "优选"
    }, {
      pid: 2,
      activityStatus: 2,
      activityName: "热门"
    }]
  },
  methods: {
    glChange(glActivityStatus) {
      console.log("攻略切换", glActivityStatus);
      this.getGl(glActivityStatus, "newGlList");
      this.glActivityStatus = glActivityStatus
    },
    productChange(activityStatus) {
      console.log("景点切换", activityStatus);
      this.getPromo(activityStatus, "newProList");
      this.activityStatus = activityStatus
    },
    _getProductCateGory_() {
      this.$axios
        .post("/cat/productCategory/categoryList", {
          limit: "3",
        })
        .then((res) => {
          this.productCateGory = res.data.productCategory.list;
        })
        .catch((err) => {
          console.log("error");
          return Promise.reject(err);
        });
    },
    _getGlCateGory_() {
      this.$axios
        .post("/cat/glCategory/glCategoryList", {
          limit: "5",
        })
        .then((res) => {
          this.glCateGory = res.data.glList.list;
        })
        .catch((err) => {
          console.log("error");
          return Promise.reject(err);
        });
    },
    _getPdCateGory_() {
      this.$axios
        .post("/cat/productCategory/categoryList", {
          limit: "5",
        })
        .then((res) => {
          this.pdCateGory = res.data.productCategory.list;
        })
        .catch((err) => {
          console.log("error");
          return Promise.reject(err);
        });
    },
    _getCarousel_() {
      this.$axios
        .post("/cat/productCarouse/carousel")
        .then((res) => {
          this.carousel = res.data.data.carousel;
        })
        .catch((err) => {
          console.log("error");
          return Promise.reject(err);
        });
    },
    // 获取各类景点数据方法封装
    getPromo(activityStatus, val, api) {
      api = api != undefined ? api : "/cat/productInfo/getProductByAi";

      this.$axios
        .post(api, {
            activityStatus: activityStatus,
            limit: "10",
          }
        )
        .then((res) => {
          // console.log("后端获取1", this[val], val, res.data.productPage)
          this[val] = res.data.productPage.list;
          // console.log("后端获取2", this[val])
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
    // 获取各类攻略数据方法封装
    getGl(categoryPid, val, api) {
      api = api != undefined ? api : "/cat/glInfo/glAi";
      this.$axios
        .post(api, {
          categoryPid: categoryPid,
          limit: "6",
        })
        .then((res) => {
          this[val] = res.data.gl.list
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
  },
  watch: {
    // 当前选中的景点分类，响应不同的景点数据
    applianceActive: function (val) {
      // 页面初始化的时候把applianceHotList(热门家电景点列表)直接赋值给applianceList(家电景点列表)
      // 所以在切换景点列表时判断applianceHotList是否为空,为空则是第一次切换,把applianceList赋值给applianceHotList
      if (this.applianceHotList == "") {
        this.applianceHotList = this.applianceList;
      }
      if (val == 1) {
        // 1为热门景点
        this.applianceList = this.applianceHotList;
        return;
      }
      if (val == 2) {
        // 2为电视景点
        this.applianceList = this.miTvList;
        return;
      }
    },
    accessoryActive: function (val) {
      // 页面初始化的时候把accessoryHotList(热门配件景点列表)直接赋值给accessoryList(配件景点列表)
      // 所以在切换景点列表时判断accessoryHotList是否为空,为空则是第一次切换,把accessoryList赋值给accessoryHotList
      if (this.accessoryHotList == "") {
        this.accessoryHotList = this.accessoryList;
      }
      if (val == 1) {
        // 1为热门景点
        this.accessoryList = this.accessoryHotList;
        return;
      }
      if (val == 2) {
        // 2为景点
        this.accessoryList = this.protectingShellList;
        return;
      }
    },
  },
};
</script>


<style scoped>

</style>
